<!-- 编辑原料颜色样式基础数据 -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>编辑原料颜色样式基础数据</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="/lib/layui-v2.6.8/css/layui.css" media="all" />
    <link rel="stylesheet" href="/css/public.css" media="all" />
    <style>
        body {
            background-color: #ffffff;
        }

        .layui-elem-quote {
            padding: 10px;
            border-left: 5px solid #009688;
        }
    </style>
</head>

<body>
    <!-- <blockquote class="layui-elem-quote layui-text">编辑原料颜色样式基础数据</blockquote> -->
    <div class="layui-form layuimini-form" lay-filter="editForm">
        <!-- 要修改的主键ID -->
        <input type="hidden" id="id" name="id" value="" />
        <input type="hidden" id="materialId" name="materialId" value="" />
        <!-- 表单字段 -->
        <div class="layui-form-item">
            <label class="layui-form-label required">关联原材料</label>
            <div class="layui-input-block">
                <input type="text" id="materialName" name="materialName" lay-verify="required" lay-reqtext="关联原材料不能为空" placeholder="请输入" value="" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">颜色样式</label>
            <div class="layui-input-block">
                <input type="text" id="colour" name="colour" lay-verify="required|colour" lay-reqtext="颜色样式不能为空" placeholder="请输入" value="" class="layui-input" />
            </div>
        </div>

        <!-- 确认保存按钮 -->
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: right;">
                <button class="layui-btn layui-btn-primary layui-layer-close1" id="cancel">取消</button>
                <button class="layui-btn" lay-submit lay-filter="saveBtn"><i class="layui-icon"></i>确认保存</button>
            </div>
        </div>
    </div>

    <!-- 后端接口定义 -->
    <script src="/js/api-route.js"></script>
    <!-- 系统通用JS库 -->
    <script src="/js/pro-module/common.js"></script>
    <!-- 页面事件处理 -->
    <script src="/lib/layui-v2.6.8/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['jquery', 'layer', 'form'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                form = layui.form;

            // 调用common.js中的getQueryString()方法获取查询参数
            var p_id = getQueryString('id');
            var res_data = {}; // 编辑页原始数据

            // 表单初始化赋值，如果表单初始化加载不成功，添加如下代码：form.render();
            $.ajax({
                url: $api.basematerialcolour.get + p_id,
                type: 'GET',
                dataType: 'JSON',
                async: false, // 使用同步请求
                contentType: 'application/json', // 指定请求方式为JSON
                // headers: {
                //     token: localStorage.token, // 接口请求头必须携带Token参数（登录后从本地存储中获取token）
                // },
                success: function (res) {
                    if (res.code == 0) {
                        res_data = res.data;
                        form.val('editForm', res.data);
                        form.render();
                    }
                },
                error: function (res) {
                    layer.msg('服务器开小差了', {
                        offset: '15px',
                        icon: 2,
                        time: 1500,
                    });
                },
            });

            // 表单初始化赋值，如果表单初始化加载不成功，添加如下代码：form.render();
            $.ajax({
                url: $api.basematerial.get + res_data.materialId,
                type: 'GET',
                dataType: 'JSON',
                async: false, // 使用同步请求
                contentType: 'application/json', // 指定请求方式为JSON
                // headers: {
                //     token: localStorage.token, // 接口请求头必须携带Token参数（登录后从本地存储中获取token）
                // },
                success: function (res) {
                    if (res.code == 0) {
                        $('#materialName').val(res.data.name);
                    }
                },
                error: function (res) {
                    layer.msg('服务器开小差了', {
                        offset: '15px',
                        icon: 2,
                        time: 1500,
                    });
                },
            });

            // lay-verify设置验证规则，多个用"|"分割，默认规则有：required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证)
            // 自定义验证规则，例如：lay-verify="required|name"
            form.verify({
                // 验证名称是否重复
                colour: function (value) {
                    var message = ''; // 验证结果
                    var params = {
                        materialId: res_data.materialId, // 关联的原材料ID
                        colour: value // 颜色值
                    };
                    // Ajax提交数据到后台
                    $.ajax({
                        url: $api.basematerialcolour.list,
                        type: 'GET',
                        data: params, // 将对象转换为JSON字符串传递
                        dataType: 'JSON',
                        async: false, // 使用同步请求
                        contentType: 'application/json', // 指定请求方式为JSON
                        // headers: {
                        //     token: localStorage.token, // 接口请求头必须携带Token参数（登录后从本地存储中获取token）
                        // },
                        success: function (res) {
                            if (res.code == 0) {
                                console.log(p_id, res);
                                // 返回的数据行大于等于1表示已经存在
                                if (res.count >= 1 && res.data[0].id != p_id) {
                                    message = '该颜色样式值已经添加过了';
                                }
                            }
                        },
                    });
                    // 验证结果返回需要写在Ajax方法外
                    if (message !== '') {
                        return message;
                    }
                },
            });

            // 监听提交
            form.on('submit(saveBtn)', function (data) {
                // Ajax提交数据到后台
                $.ajax({
                    url: $api.basematerialcolour.update,
                    type: 'POST',
                    data: JSON.stringify(data.field), // 将对象转换为JSON字符串传递
                    dataType: 'JSON',
                    contentType: 'application/json', // 指定请求方式为JSON
                    // headers: {
                    //     token: localStorage.token, // 接口请求头必须携带Token参数（登录后从本地存储中获取token）
                    // },
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg('修改成功', {
                                icon: 6
                            });
                        } else {
                            layer.msg('修改失败', {
                                icon: 5
                            });
                        }
                        // 刷新列表页面
                        setTimeout(function () {
                            parent.layui.table.reload('currentTable1', {
                                where: {
                                    type: res_data.materialId // 使用关联的主数据ID作为条件刷新列表
                                }, // 查询的条件（可用Q请求参数类进行封装）
                                page: {
                                    curr: 1
                                },
                                url: $api.basematerialcolour.pagelist, // 后端分页查询接口地址
                                method: 'GET',
                            }, 'data');
                            window.parent.layer.closeAll();
                            return false;
                        }, 500);
                    },
                    error: function (res) {
                        layer.msg('服务器开小差了', {
                            offset: '15px',
                            icon: 2,
                            time: 1500,
                        });
                    },
                });
            });

            // 点击取消按钮
            $('#cancel').click(function () {
                // 关闭当前弹出页面
                window.parent.layer.closeAll();
                return false;
            });

        });
    </script>
</body>

</html>